<template>
	
	<view class="center">
		
		<uni-nav-bar @clickLeft="back" left-icon="back" left-text="" right-text="全选" title="批量购买"></uni-nav-bar>
		
		
		
	<uni-list>
		
		<checkbox-group name="" @change="selected">
			<label class="shopList"
			   v-for="( item ) in chapterList" 
			   :key="item.number + '' "
			   >
			   <uni-list-item
			     class="shopListItem"
			     :title="item.title" 
				 :show-arrow="false">  
					<uni-icons type="arrowright" class="arrowright"></uni-icons>
			   </uni-list-item>
					<checkbox 
					class="icons"
					  :value="item.number + '' " 
					   /><text></text>
				
			</label>
		</checkbox-group>
		 
		 <!-- <view class="shopList" 
		   v-for="( item ) in chapterList" :key="item.id">	
			 <uni-list-item   
			 class="shopListItem"
			 :title="item.title" :show-arrow="false">  
				<uni-icons type="arrowright" class="arrowright"></uni-icons>
			 </uni-list-item>
		 </view> -->
		 
	</uni-list>
		
		
		
		<view class="uni-share-content">
			<view class="uni-share-content-box">
				<text class="title">已选： {{selectChapter}} 章节</text>
				<view class="top">
					<text class="text-red">价格：10春卷</text>
					<text>余额: {{this.$store.getters.getUserMoney}} 春卷</text>
				</view>
				<view class="butm">
					<button type="warn" class="shopThisPage"
					@tap="shopPage">请选择购买章节</button>
				</view>
			</view>
		</view>
		
		
		
		
	</view>
	
</template>

<script>
	
	export default {
		onLoad(options) {
			this.Bookid = options.id
		},
		created() {
			this.chapterList = this.$store.getters.chapterList(this.Bookid)
		},
		components: {
				
		},
		data() {
			return {
				chapterList: null,
				selectChapter:0,
				isChecked:false,
				thisSelector:[]
			}
		},
		methods: {
			back(){
				uni.navigateBack({
				})
			},
			selected(value) {
				let Bookid = this.Bookid
				let array = value.detail.value
				let crrunret = this.$store.getters.getUserSelectChapter({array,Bookid})
				this.thisSelector = crrunret 
				// console.log(crrunret)
				let pirceCount = crrunret.reduce( (acc,cur) => { 
					return acc + cur.price
				},0) 
					
				
				if( pirceCount <= 100 ){
					this.selectChapter =  value.detail.value.length
					this.$store.commit({
						type:'ComputedPrice',
						pirceCount:pirceCount 
					})
						
				}else{
					this.selectChapter = 0
					this.isChecked = false
					alert('请充值后继续购买')
					return
				}
			},
			shopPage(){
				let Selector = this.thisSelector 
				let id = parseInt(this.Bookid) - 1
				// console.log(id,'我是指')
				this.$store.commit({
					type:'shopChapter',
					selector:Selector,
					bookid:id 
				})
			}
		},
	}
</script>

<style scoped>

.title{
	font-size: 15px;
	margin: 10px;
}
	.uni-share-content {
		border-top: 1px solid #000000;
			/* #ifndef APP-NVUE */
			display: flex;
			position: fixed;
			bottom: 0;
			background-color:#fff;
			/* #endif */
			width: 100%;
			flex-direction: row;
			justify-content: center;
			/* padding-top: 10px; */
			
			
		}
		
		.uni-share-content-box {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			flex-wrap: wrap;
			align-items: center;
			width: 360px;
		}
		
		.uni-share-content-item {
			width: 90px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			justify-content: center;
			padding: 10px 0;
			align-items: center;
		}
		
		.uni-share-content-item:active {
			background-color: #f5f5f5;
		}
		
		.uni-share-image {
			width: 30px;
			height: 30px;
		}
		
		.uni-share-text {
			margin-top: 10px;
			font-size: 14px;
			color: #3B4144;
		}
		
		.uni-share-button-box {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			padding: 10px 15px;
		}
	.top{
		font-size: 12px;
	}
	.text-red{
		color: red;
		padding-right: 8px;
	}
	.butm{
		margin: 10px 0 10px 0;
		width: 26vh;
	}
	.shopThisPage{
		font-size: 12px;
		padding: 4px;
		border-radius: 15px;
	}
	.shopAll{
		font-size: 12px;
	}
	.shopList{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.shopListItem{
		display: flex;
		width: 100%;
		position: relative;
		text-align: center;
	}
.arrowright{
	position: absolute;
	margin-left: 2px;
}
.icons{
	/* position: absolute; */
	margin-left: -25px;
	/* margin-left: 15px; */
}
</style>